<template>
	<view class="order-manage">
		<NavBar title="订单管理" right="search" @rightTap="search"/>
		<SwitchTab :arr="shopOrderArr" @tapSwitch="tapSwitch" :p_top="44"/>
		<view class="content" v-if="orderList.length">
			<OrderManageItem 
				:index="index" 
				:orderInfo="item" 
				v-for="(item, index) in orderList" 
				:key="item"
				@refund="confirmRefund"
				@send="confirmSend"
			/>
		</view>
		<Empty txt="暂时没有收到订单哦~" v-else/>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad, onReachBottom } from '@dcloudio/uni-app'
	import NavBar from '@/components/NavBar.vue';
	import Empty from '@/components/Empty.vue';
	import SwitchTab from '@/components/SwitchTab.vue';
	import OrderManageItem from './components/OrderManageItem.vue';
	import { GetOrderLiatApi } from '@/service/shop.js'
	import { shopOrderArr } from '@/utils/switchBar.js'
	const page = ref(1)
	const page_size = ref(15)
	const total = ref(0)
	const status = ref(-1) // -1全部 0未支付 1待发货 2已发货 3已完成 4已关闭 5退款中
	const orderList = ref([])
	const tapSwitch = (e) => {
		status.value = e
		page.value = 1
		orderList.value = []
		getOrderList()
	}
	const search = () => {
		console.log('search');
	}
	// 确认退款
	const confirmRefund = (i) => {
		orderList.value[i].status = 8
	}
	// 确认送达
	const confirmSend = (i) => {
		orderList.value[i].status = 5
	}
	const getOrderList = () => {
		let params = {
			page: page.value,
			page_size: page_size.value,
			status: status.value
		}
		GetOrderLiatApi(params).then(res => {
			console.log(res);
			total.value = res.total
			orderList.value.push(...res.data)
		})
	}
	onLoad(() => {
		getOrderList()
	})
	onReachBottom(() => {
		if(page.value*page_size.value>=total.value) return
		page.value = page.value + 1
		getOrderList()
	})
</script>

<style scoped lang="scss">
.order-manage {
	width: 100%;
	// .switch-bar {
	// 	height: 26px;
	// 	padding: 0 12px;
	// 	line-height: 26px;
	// 	white-space: nowrap;
	// 	box-sizing: border-box;
	// 	box-sizing: border-box;
	// 	.switch-item {
	// 		display: inline-block;
	// 		width: 42px;
	// 		text-align: center;
	// 		color: #555555;
	// 		font-size: 14px;
	// 		font-weight: 400;
	// 		margin-right: 27px;
	// 		&.a-switch-item {
	// 			color: #FF3B1E;
	// 			font-size: 16px;
	// 			font-weight: 500;
	// 			position: relative;
	// 			&::before {
	// 				position: absolute;
	// 				bottom: 0;
	// 				left: 50%;
	// 				transform: translateX(-50%);
	// 				display: block;
	// 				content: '';
	// 				width: 26px;
	// 				height: 4px;
	// 				border-radius: 33px;
	// 				background: linear-gradient( 360deg, #FF8508 0%, #FF4847 100%);
	// 			}
	// 		}
	// 	}
	// }
	.content {
		padding: 10px 12px;
	}
}
</style>
